{% extends "template_base.html" %}
{% block title %}DeepyWeb - Welcome!{% endblock %}
{% block hero %}
    <section id="hero1">
        <div class="hero1-container">
            <h1>DeepyWeb</h1>
            <h2>一&nbsp;&nbsp;个&nbsp;&nbsp;弱&nbsp;&nbsp;小&nbsp;&nbsp;的&nbsp;&nbsp;机&nbsp;&nbsp;器&nbsp;&nbsp;学&nbsp;&nbsp;习&nbsp;&nbsp;平&nbsp;&nbsp;台</h2>
            <a href="#about" class="btn-get-started scrollto">开 始</a>
        </div>
    </section>
{% endblock %}

{% block script %}
    <script>
        $(function () {
            var text = document.getElementById("my_alert").textContent;
            if (text != '') {
                alert(text);
            }
        });

        function check_logged(id) {
            if (!id) {
                alert("请先登录！");
                return false;
            } else {
                return true;
            }
        }
    </script>
{% endblock %}

{% block navbar %}
    <nav id="navbar" class="navbar">
        <ul>
            <!--<li><a class="nav-link scrollto active " href="#header">Home</a></li>-->
            <li><a class="nav-link scrollto" href="/user_manage" onclick="return check_logged({{session['user_id']}})">用户中心</a></li>
            <li><a class="nav-link scrollto" href="#about">关于我们</a></li>
            <li><a class="nav-link scrollto" href="#services">模 型</a></li>
            <li><a class="nav-link scrollto" href="#query">查询结果</a></li>
            <li><a class="nav-link scrollto" href="#team">团 队</a></li>
            <li><a class="nav-link scrollto" href="#contact">联系我们</a></li>
            {% if not logged %}
                <li><a class="getstarted scrollto" href="login">登 录</a></li>
            {% endif %}
            {% if logged %}
                <li><a class="getstarted scrollto" href="logout">登 出</a></li>
            {% endif %}

        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
    </nav><!-- .navbar -->
{% endblock %}

{% block main %}
    <main id="main">
        <span id="my_alert" style="display:none;">{{my_alert}}</span>
        <!-- ======= About Section ======= -->
        <section id="about" class="about">

            <div class="container" data-aos="fade-up">
                <div class="row gx-0">

                    <div class="col-lg-6 d-flex flex-column justify-content-center" data-aos="fade-up"
                         data-aos-delay="200">
                        <div class="content">
                            <h3>Who We Are</h3>
                            <h2 style="letter-spacing: 5px">一个弱小的线上机器学习平台，为您提供多种机器学习模型(bushi)</h2>
                            <p style="letter-spacing: 5px"> 1. 远端高效的并行计算资源</p>
                            <p style="letter-spacing: 5px"> 2. 自主定义的模型参数选择</p>
                            <p style="letter-spacing: 5px"> 3. 方便的历史任务查询管理</p>
                            <p style="letter-spacing: 5px"> 4. 安全可靠的信息管理系统</p>
                            <p style="letter-spacing: 5px"> 5. 简洁大气流畅的操作界面</p>
                            <div class="text-center text-lg-start">
                                <a href="#"
                                   class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center">
                                    <span>了 解 更 多</span>
                                    <i class="bi bi-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 d-flex align-items-center" data-aos="zoom-out" data-aos-delay="200">
                        <img src="static/assets/img/about.jpg" class="img-fluid" alt="">
                    </div>

                </div>
            </div>

        </section><!-- End About Section -->

<!--        <section id="values" class="values">-->
<!--            <div class="container" data-aos="fade-up">-->

<!--                <header class="section-header">-->
<!--                    <h2></h2>-->
<!--                    <p>Our Advantages</p>-->
<!--                </header>-->

<!--                <div class="row">-->

<!--                    <div class="col-lg-4">-->
<!--                        <div class="box" data-aos="fade-up" data-aos-delay="200">-->
<!--                            <img src="static/assets/img/values-1.png" class="img-fluid" alt="">-->
<!--                            <h3>Multi-threading</h3>-->
<!--                            <p></p>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="col-lg-4 mt-4 mt-lg-0">-->
<!--                        <div class="box" data-aos="fade-up" data-aos-delay="400">-->
<!--                            <img src="static/assets/img/values-2.png" class="img-fluid" alt="">-->
<!--                            <h3>Customize</h3>-->
<!--                            <p></p>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="col-lg-4 mt-4 mt-lg-0">-->
<!--                        <div class="box" data-aos="fade-up" data-aos-delay="600">-->
<!--                            <img src="static/assets/img/values-3.png" class="img-fluid" alt="">-->
<!--                            <h3>Check anytime</h3>-->
<!--                            <p></p>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                </div>-->

<!--            </div>-->

<!--        </section>&lt;!&ndash; End Values Section &ndash;&gt;-->

<!--        &lt;!&ndash; ======= Features Section ======= &ndash;&gt;-->
<!--        <section id="features" class="features">-->

<!--            <div class="container" data-aos="fade-up">-->

<!--                <header class="section-header">-->
<!--                    <h2></h2>-->
<!--                    <p>Features</p>-->
<!--                </header>-->

<!--                <div class="row">-->

<!--                    <div class="col-lg-6">-->
<!--                        <img src="static/assets/img/features.png" class="img-fluid" alt="">-->
<!--                    </div>-->

<!--                    <div class="col-lg-6 mt-5 mt-lg-0 d-flex">-->
<!--                        <div class="row align-self-center gy-4">-->

<!--                            <div class="col-md-6" data-aos="zoom-out" data-aos-delay="200">-->
<!--                                <div class="feature-box d-flex align-items-center">-->
<!--                                    <i class="bi bi-check"></i>-->
<!--                                    <h3>Scalable</h3>-->
<!--                                </div>-->
<!--                            </div>-->

<!--                            <div class="col-md-6" data-aos="zoom-out" data-aos-delay="300">-->
<!--                                <div class="feature-box d-flex align-items-center">-->
<!--                                    <i class="bi bi-check"></i>-->
<!--                                    <h3>Comparable</h3>-->
<!--                                </div>-->
<!--                            </div>-->

<!--                            <div class="col-md-6" data-aos="zoom-out" data-aos-delay="400">-->
<!--                                <div class="feature-box d-flex align-items-center">-->
<!--                                    <i class="bi bi-check"></i>-->
<!--                                    <h3>Realizable disturbance</h3>-->
<!--                                </div>-->
<!--                            </div>-->

<!--                            <div class="col-md-6" data-aos="zoom-out" data-aos-delay="500">-->
<!--                                <div class="feature-box d-flex align-items-center">-->
<!--                                    <i class="bi bi-check"></i>-->
<!--                                    <h3>Classification data set</h3>-->
<!--                                </div>-->
<!--                            </div>-->

<!--                        </div>-->
<!--                    </div>-->

<!--                </div> &lt;!&ndash; / row &ndash;&gt;-->

<!--            </div>-->

<!--        </section>&lt;!&ndash; End Features Section &ndash;&gt;-->

        <!-- ======= Services Section ======= -->
        <section id="services" class="services">

            <div class="container" data-aos="fade-up">

                <header class="section-header">
                    <h2>CHOOSE YOUR TASK HERE</h2>
                    <p>任&nbsp;务</p>
                    <p></p>
                    <h3>您可以选择创建新任务或管理已有任务</h3>
                </header>

                <div class="row gy-4">

                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
                        <div class="service-box blue">
                            <i class="ri-discuss-line icon"></i>
                            <h3></h3>
                            <h3>创建一个新的任务</h3>
                            <p>Create a New Task</p>
                            <a href="select_to_start" class="read-more" onclick="return check_logged({{session['user_id']}})"><span>点此进入</span> <i
                                    class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
                        <div class="service-box orange">
                            <i class="ri-discuss-line icon"></i>
                            <h3>继续已有的任务</h3>
                            <p>Select From Existing Tasks</p>
                            <a href="task_select" class="read-more" onclick="return check_logged({{session['user_id']}})"><span>点此进入</span> <i class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
                        <div class="service-box red">
                            <i class="ri-discuss-line icon"></i>
                            <h3></h3>
                            <h3>管理历史任务</h3>
                            <p>Manage Old Tasks</p>
                            <a href="manage_old_task" class="read-more" onclick="return check_logged({{session['user_id']}})"><span>点此进入</span> <i
                                    class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>
                </div>

            </div>

        </section><!-- End Services Section -->
        <section id="query" class="query">

            <div class="container" data-aos="fade-up">

                <header class="section-header">
                    <h2>Check Your Query Results Here</h2>
                    <p>历 史 记 录 查 询 入 口</p>
                </header>
                <br>
                <div class="row" style="position:relative;">
                    <br>
                    <br>
                    <a href="queryResult" onclick="return check_logged({{session['user_id']}})">
                        <h3 style="line-height:100px;position:absolute;margin:auto;top:0;left:0;bottom:0;right:0;border-radius:8px;background:#4154f1;width:380px;height:100px;font-weight:700;color:#FFFFFF;text-align:center;">
                            点&nbsp;击&nbsp;查&nbsp;询&nbsp;历&nbsp;史&nbsp;记&nbsp;录</h3>
                    </a>
                </div>


            </div>

        </section><!-- End Query Section -->
        <!-- ======= F.A.Q Section ======= -->
        <section id="faq" class="faq">

            <div class="container" data-aos="fade-up">

                <header class="section-header">
                    <h2>F.A.Q</h2>
                    <p>Frequently Asked Questions</p>
                </header>

                <div class="row">
                    <center>
                        <div style="width: 70%;">
                            <!-- F.A.Q List 1-->
                            <div class="accordion accordion-flush" id="faqlist1">
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#faq-content-1">
                                            我想训练一个机器学习模型，应该如何创建新任务？
                                        </button>
                                    </h2>
                                    <div id="faq-content-1" class="accordion-collapse collapse"
                                         data-bs-parent="#faqlist1">
                                        <div class="accordion-body">
                                            您可以在主页的“任务”栏下点击“创建一个新的任务”。目前系统支持线性回归与随机森林两种任务，
                                            您可以根据需要选择模型，按照提示上传 csv 文件后指定相关参数。
                                        </div>
                                    </div>
                                </div>

                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#faq-content-2">
                                            如果我想用不同参数训练同一个模型，需要对每个参数组合都创建一个新任务吗？
                                        </button>
                                    </h2>
                                    <div id="faq-content-2" class="accordion-collapse collapse"
                                         data-bs-parent="#faqlist1">
                                        <div class="accordion-body">
                                            不需要，您可以直接在“任务”窗口下选择“继续已有的任务”，即可对同一组数据另外一组
                                            参数进行训练。
                                        </div>
                                    </div>
                                </div>


                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#faq-content-3">
                                            我在提交的模型正在被训练，但我不小心关闭了网页，需要重新提交训练任务吗？
                                        </button>
                                    </h2>
                                    <div id="faq-content-3" class="accordion-collapse collapse"
                                         data-bs-parent="#faqlist1">
                                        <div class="accordion-body">
                                            不需要。模型被提交之后，将会在远端被训练。您可以重新进入网页登录，并在“历史记录查询入口”
                                            下载您的模型训练结果。
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </center>

                    <div class="col-lg-6">

                        <!-- F.A.Q List 2-->
                        <div class="accordion accordion-flush" id="faqlist2">
                        </div>
                    </div>

                </div>

            </div>

        </section><!-- End F.A.Q Section -->

        <!-- ======= Team Section ======= -->
        <section id="team" class="team">

            <div class="container" data-aos="fade-up">

                <header class="section-header">
                    <h2>Team</h2>
                    <p>我 们 的 团 队</p>
                </header>

                <div class="row gy-5">
                    <div class="d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100"
                         style="width: 5%">
                        <div class="member">

                        </div>
                    </div>

                    <div class="d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100"
                         style="width: 32.5%">
                        <div class="member">
                            <div class="member-img">
                                <img src="static/assets/img/team/team-1.jpg" class="img-fluid" alt=""
                                style="height: 300px; width: 300px">
                                <div class="social">
                                    <a href=""><i class="bi bi-twitter"></i></a>
                                    <a href=""><i class="bi bi-facebook"></i></a>
                                    <a href=""><i class="bi bi-instagram"></i></a>
                                    <a href=""><i class="bi bi-linkedin"></i></a>
                                </div>
                            </div>
                            <div class="member-info">
                                <h4>牛易明</h4>
                                <span>CSGO重度玩家</span>
                                <p>“针不戳，在六系学习，针不戳”</p>
                            </div>
                        </div>
                        <br>
                    </div>

                    <div class="d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200"
                    style="width: 32.5%">
                        <div class="member">
                            <div class="member-img">
                                <img src="static/assets/img/team/team-2.jpg" class="img-fluid" alt=""
                                style="height: 300px; width: 300px">
                                <div class="social">
                                    <a href=""><i class="bi bi-twitter"></i></a>
                                    <a href=""><i class="bi bi-facebook"></i></a>
                                    <a href=""><i class="bi bi-instagram"></i></a>
                                    <a href=""><i class="bi bi-linkedin"></i></a>
                                </div>
                            </div>
                            <div class="member-info">
                                <h4>马婧颖</h4>
                                <span>前端</span>
                                <p>“害怕”</p>
                            </div>
                        </div>
                        <br>
                    </div>

                    <div class="d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="300"
                    style="width: 30%">
                        <div class="member">
                            <div class="member-img">
                                <img src="static/assets/img/team/team-3.jpg" class="img-fluid" alt=""
                                style="height: 300px; width: 300px">
                                <div class="social">
                                    <a href=""><i class="bi bi-twitter"></i></a>
                                    <a href=""><i class="bi bi-facebook"></i></a>
                                    <a href=""><i class="bi bi-instagram"></i></a>
                                    <a href=""><i class="bi bi-linkedin"></i></a>
                                </div>
                            </div>
                            <div class="member-info">
                                <h4>吴梓萌</h4>
                                <span>半个后端？</span>
                                <p>“麻了”</p>
                            </div>
                        </div>
                        <br>
                    </div>

                </div>

            </div>

        </section><!-- End Team Section -->

        <!-- ======= Contact Section ======= -->
        <section id="contact" class="contact">

            <div class="container" data-aos="fade-up">

                <header class="section-header">
                    <h2>Contact</h2>
                    <p>Contact Us</p>
                </header>

                <div class="row gy-4">

                    <div class="col-lg-6">

                        <div class="row gy-4">
                            <div class="col-md-6">
                                <div class="info-box">
                                    <i class="bi bi-geo-alt"></i>
                                    <h3>Address</h3>
                                    <p>A108 Adam Street,<br>New York, NY 535022</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-box">
                                    <i class="bi bi-telephone"></i>
                                    <h3>Call Us</h3>
                                    <p>+1 5589 55488 55<br>+1 6678 254445 41</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-box">
                                    <i class="bi bi-envelope"></i>
                                    <h3>Email Us</h3>
                                    <p>info@example.com<br>contact@example.com</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-box">
                                    <i class="bi bi-clock"></i>
                                    <h3>Open Hours</h3>
                                    <p>Monday - Friday<br>9:00AM - 05:00PM</p>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-lg-6">
                        <form action="forms/contact.php" method="post" class="php-email-form">
                            <div class="row gy-4">

                                <div class="col-md-6">
                                    <input type="text" name="name" class="form-control" placeholder="Your Name"
                                           required>
                                </div>

                                <div class="col-md-6 ">
                                    <input type="email" class="form-control" name="email" placeholder="Your Email"
                                           required>
                                </div>

                                <div class="col-md-12">
                                    <input type="text" class="form-control" name="subject" placeholder="Subject"
                                           required>
                                </div>

                                <div class="col-md-12">
                                    <textarea class="form-control" name="message" rows="6" placeholder="Message"
                                              required></textarea>
                                </div>

                                <div class="col-md-12 text-center">
                                    <div class="loading">Loading</div>
                                    <div class="error-message"></div>
                                    <div class="sent-message">Your message has been sent. Thank you!</div>

                                    <button type="submit">Send Message</button>
                                </div>

                            </div>
                        </form>

                    </div>

                </div>

            </div>

        </section><!-- End Contact Section -->

    </main><!-- End #main -->
{% endblock %}